<!--
 * @Author: C.
 * @Date: 2023-03-06 11:39:57
-->

<script lang="tsx">
  import { useLang } from './hooks';
  import { Descriptions, DescriptionsItem, TabPane, Tabs, Card } from 'ant-design-vue';
  import { defineComponent } from 'vue';
  import { isString, isObject } from '/@/utils/is';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { CopyOutlined } from '@ant-design/icons-vue';
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
    setup() {
      const { langMap } = useLang();
      const { createMessage } = useMessage();
      const { clipboardRef } = useCopyToClipboard();
      function renderTabPane(renderMap) {
        return Object.keys(renderMap).map((fileName) => {
          let fileObj = renderMap[fileName];
          return (
            <TabPane tab={fileName} key={fileName}>
              {renderDesc(fileObj, [fileName])}
            </TabPane>
          );
        });
      }
      function renderDesc(fileObj, levelSign: string[]) {
        if (isString(fileObj)) return fileObj;
        const left = Object.keys(fileObj)
          .filter((name) => {
            return isObject(fileObj[name]);
          })
          .map((modName) => {
            let modObj = fileObj[modName];
            return (
              <Card title={modName}>
                <Descriptions bordered size="small" layout="vertical">
                  {Object.keys(modObj).map((item) => {
                    return renderDescItem(modObj, item, [...levelSign, modName, item]);
                  })}
                </Descriptions>
              </Card>
            );
          });
        const right = Object.keys(fileObj).filter((name) => {
          return !isObject(fileObj[name]);
        });
        const comp = () => {
          return (
            <Descriptions bordered size="small" layout="vertical">
              {right.map((item) => {
                return renderDescItem(fileObj, item, [...levelSign, item]);
              })}
            </Descriptions>
          );
        };
        return [comp(), ...left];
      }
      function handleClick(levelSign, modObj, name) {
        // createMessage.success(`[${modObj[name]}]复制成功`);
        clipboardRef.value = `t('${levelSign.join('.')}')`;
        createMessage.success(`[${modObj[name]}]复制成功`);
      }
      function renderDescItem(modObj, name, levelSign: string[]) {
        let style = {
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        };
        return isString(modObj[name]) ? (
          <DescriptionsItem label={name}>
            <div style={style}>
              <span>{modObj[name]}</span>
              <CopyOutlined
                style={{ color: '#0960bd', fontSize: '20px' }}
                onClick={() => handleClick(levelSign, modObj, name)}
              />
            </div>
          </DescriptionsItem>
        ) : (
          <DescriptionsItem label={name}>
            {renderDesc(modObj[name], [...levelSign, name])}
          </DescriptionsItem>
        );
      }
      return () => (
        <PageWrapper title="多语言">
          <div class="lang-view">
            <Tabs>{renderTabPane(langMap)}</Tabs>
          </div>
        </PageWrapper>
      );
    },
  });
</script>
<style lang="less" scoped>
  .lang-view {
    background-color: @component-background;
    padding: 0px 20px 100px 20px;
  }
</style>
